<template>
  <div>
    <div class="search_form">
      <el-input v-model="queryForm.searchText" placeholder="根据课程名称搜索" style="width: 250px;"></el-input>
      <span style="width: 120px; color:white; flex-shrink: 0;">专业选择：</span>
      <el-select v-model="queryForm.CategoryOne">
        <el-option v-for="item in opt1" :key="item.label" :label="item.label" :value="item.value"></el-option>
      </el-select>
        <el-select v-model="queryForm.CategoryTwo">
        <el-option v-for="item in opt2" :key="item.label" :label="item.label" :value="item.value"></el-option>
      </el-select>
        <el-select v-model="queryForm.CategoryThree">
        <el-option v-for="item in opt3" :key="item.label" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <el-button type="primary" @click="toSearch">查询</el-button>
    </div>
    <div style="width: 900px;margin: 20px auto;">
      <table-title title="课程列表"></table-title>
      <el-table border stripe :data="courseList">
        <el-table-column label="课程名称" prop="Cname"></el-table-column>
        <el-table-column prop="Cnumber" label="课程代号"></el-table-column>
        <el-table-column label="在学人数" prop="onlineUser"></el-table-column>
        <el-table-column label="编辑日期">
          <template #default="{row}">
            <div> 
               {{new Date(row.upDateAt).toLocaleString()}}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template #default="{row}">
            <div>
              <span v-if="row.isState==1">草稿</span>
              <span v-else-if="row.isState==2">上架</span>
               <span v-else-if="row.isState==3">下架</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250">
          <template #default="{row}">
            <div style="width: 100%; display: flex; justify-content: space-around;">
               <el-link type="primary" @click="toEditCourse(row)">编辑</el-link>
               <el-link :type="row.isState==1||row.isState==3?'success':'danger'" @click="toUpDown(row.ID)">
                {{row.isState==1||row.isState==3?'上架':'下架'}}
              </el-link>
              <!-- 带提示的删除 -->
                <el-popconfirm
                  title="你确定删除当前课程吗？"
                  @confirm="toDel(row._id)"
                >
                  <el-link type="warning" slot="reference">删除</el-link>
                </el-popconfirm>
             

               <el-link :type="row.isTop?'danger':'primary'"
               @click="toTop(row.ID)">{{row.isTop?'取消置顶':'置顶'}}</el-link>
            </div>
          </template>
        </el-table-column>
           
      </el-table>
      <el-pagination background :total="total" :page-size="3" layout="prev,pager,next" @current-change="pageChange"></el-pagination>
    </div>
  </div>
</template>
<script>
// 导入获取课程列表接口
import {getCourseListApi,courseOnOffApi,courseDeleteApi,courseTopApi} from '@/api/course'
import cateObj from '@/utils/cate'
export default {
   mixins:[cateObj],
   data(){
    return {
      queryForm:{ //搜索和分页的条件
        searchText:"",//搜索关键字
        CategoryOne:"",//一级分类
        CategoryTwo :"",//二级分类
        CategoryThree:"",//三级分类
        pageStart:1//当前页码
      },
      courseList:[],//课程列表
      total:0,//数据总条数
    }
   },
   created(){
    this.getList();
   },
   methods:{
    toEditCourse(row){ //点击编辑 进入课程添加 并传课程ID 和_id 到地址栏 添加课程页面进入编辑模式 
      this.$router.push({
        name:"courseadd",
        query:{
          ID:row.ID, //课程ID
          _id:row._id //课程_id
        }
      })

    },
    async toTop(ID){ //课程置顶接口
      let res=await courseTopApi(ID)
      console.log(res,'----置顶')
      this.getList();
    },
    async toDel(_id){ //删除课程接口
      let res=await courseDeleteApi(_id)
       console.log(res,' ----删除接口')
      this.getList();
    },
   async  toUpDown(ID){ //课程上架下架接口
        let res=await courseOnOffApi(ID)
        console.log(res,' ----上下架')
        this.getList();
    },
    toSearch(){
      this.getList();//点击重新获取数据
      this.queryForm.searchText=""
      this.queryForm.CategoryOne=""
      this.queryForm.CategoryTwo=""
      this.queryForm.CategoryThree=""
    },
    toAdd(){
      this.$router.push('/course/add')
    },
    pageChange(page){ //分页改变
     this.queryForm.pageStart=page;//修改当前页码
     this.getList()//重新获取数据
    },
    async getList(){ //获取课程列表 
      let res=await getCourseListApi(this.queryForm)
      console.log(res,"----课程列表")
      this.courseList=res.data.list;
      this.total=res.data.count;
    }
   }
}
</script>
<style lang="scss" scoped>
   .search_form{
    width: 900px;
    margin: 20px auto;
    display: flex;
    align-items: center;
 
   }
</style>